// * 将面向过程的变量作为面向对象的属性。
// * 将面向过程的函数作为面向对象的方法
function Tag(options={}){
	const {el="#root",index=0,colorArr=["red","green","yellow"]} = options;
	const element = document.querySelector(el);
	this.btns = element.querySelectorAll("button");
	this.divs = element.querySelectorAll("div");
	this.index = index;// 记录当前被选中的下标
	this.colorArr = colorArr;
	this.init();
}
Tag.prototype.init = function(){
	
	this.btns.forEach(function(btn,i){
		this.hide(i);
		btn.onclick = function(){
			if(this.index === i) return;
			this.hide();
			this.index = i;
			this.show();
		}.bind(this);
	}.bind(this))
	this.show();
}
Tag.prototype.hide = function(i=this.index){
	this.btns[i].style.background = null;
	this.divs[i].style.display = "none";
}
Tag.prototype.show = function(){
	this.divs[this.index].style.background = this.btns[this.index].style.background = this.colorArr[this.index];
	this.divs[this.index].style.display = "block";
}